<template>
   <view class="tab-container">
     <view class="tabBar-nav rowSS">
       <view class="tabBar-nav-item columnCC"
             @click="toSwitchTable(item.entrancePath)"
             v-for="(item, index) in tabBarList" :key="index">
         <image class="item-images"
                :src="selectNavIndex === item.entranceCode ? item.selectedIcon : item.icon"/>
         <view
             :class="selectNavIndex === item.entranceCode ? 'item-text-active' : ''"
             class="item-text">{{item.title}}</view>
       </view>
     </view>
   </view>
</template>

<script>
  export default {
    props: {
      selectNavIndex: {
        required: false,
        default: 'tableOne'
      },
    },
    data() {
      return {
        tabBarList:[
          {
            icon:"/static/tabbar/index.png",
            selectedIcon:"/static/tabbar/indexSelected.png",
            title:"标题1",
            entrancePath:"/pages/tableOne/tableOne",
            entranceCode: "tableOne",
          },
          {
            icon:"/static/tabbar/index.png",
            selectedIcon:"/static/tabbar/indexSelected.png",
            title:"标题2",
            entrancePath:"/pages/tableTwo/tableTwo",
            entranceCode:"tableTwo",
          }
        ],
      };
    },
    beforeCreate() {
      uni.hideTabBar({animation: false});
    },
    mounted() {},
    methods:{
      toSwitchTable(toPage){
        //console.log("toPage",toPage);
        uni.switchTab({
          url: `${toPage}`,
        })
      }
    }
  };
</script>

<style lang="scss">
  .tabBar-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 98px;
    padding-top:11px;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #EAEAEA;
    background-color: #f8f8f8;
    z-index: 10;
    display: flex;
  }

  .tabBar-nav-item{
    flex: 1;
    text-align: center;
    .item-text {
      margin-bottom: 6px;
      font-size:20px;
      font-weight:400;
      color:rgba(53,53,53,1);
      line-height:24px;
      transition: .24s linear;
    }
    .item-text-active {
      margin-bottom: 6px;
      font-size:20px;
      font-weight:500;
      color:#ff6c00;
      line-height:24px;
    }
    .item-images{
      width: 56px;
      height: 56px;
    }
  }
</style>
